<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>进度条</title>
	<style>
		*{padding:0;margin:0;}
		#big{
			position:relative;
			width:1000px;
			height:40px;
			border:1px solid red;
		}
		#did{
			position:absolute;
			left:0;
			top:0;
			width:0;
			height:40px;
			background-color:blue;
			text-align:center;
			font-size:32px;
			color:#fff;
		}
	</style>
</head>
<body>
	<div id="big" >
		<div id="did" ></div>
	</div>
	<button id="btn" >开始</button>
</body>
	<script>
		mytime=null;
		sWidth=0;
		big = document.getElementById("big");
		did = document.getElementById("did");
		btn = document.getElementById("btn");
		bigs = big.offsetWidth-2;
		btn.onclick=function(){
			tt = setInterval(function(){
				sWidth++;
				did.style.width = sWidth+"px";
				did.innerHTML = Math.round((parseInt(did.style.width)/parseInt(bigs))*100)+"%";
				if(parseInt(did.style.width)>=bigs){
					clearInterval(tt);
				}
			},10);
		}
	</script>
</html>